<template>
  <div>
    <el-input
      v-model="filterText"
      placeholder="输入关键字进行过滤"
    />
    <el-tree
      ref="tree"
      v-loading="treeLoading"
      class="filter-tree"
      :data="data"
      :props="defaultProps"
      :highlight-current="true"
      node-key="id"
      :filter-node-method="filterNode"
      :default-expand-all="true"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>
import { getTree } from '@/api/system/area'
export default {
  name: 'AreaTree',
  data() {
    return {
      filterText: '',
      treeLoading: false,
      defaultProps: {
        children: 'children',
        label: 'areaname'
      },
      data: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getAreaDatas()
  },
  mounted() {},
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.areaname.indexOf(value) !== -1
    },
    getAreaDatas() {
      this.treeLoading = true
      getTree().then(res => {
        this.data = [{
          areaid: null,
          areaname: '全部',
          children: res.data.list
        }]
        this.treeLoading = false
      }).catch(() => {
        this.treeLoading = false
      })
    },
    // 点击
    handleNodeClick(data) {
      this.$emit('handleNodeClick', data)
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
